// import React from 'react';
import {
  PageContainer,
  ProTable,
  ModalForm,
  ProFormText,
  ProForm,
  ProFormTextArea,
  ProFormCheckbox,
} from '@ant-design/pro-components';
import { Space } from 'antd';
import { Button } from 'antd';
// import { FormItem, FormattedMessage } from 'antd/es/form/FormItem';
import { EditOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useEffect } from 'react';
// import { dalImg } from '@/utils/tools';
// import MyUpload from '@/components/myupload/MyUpload';
// import MyEditor from '@/components/myupload/MyEditor';
import {
  loadDataAPI,
  addDoctorAPI,
  delDoctorAPI,
  loadDoctorAPI,
  editDoctorAPI,
  delrolesAPI,
  loadperAPI,
} from '@/services/roles';
import { useRef } from 'react';
import { Popconfirm } from 'antd';

function Roles() {
  const [isShow, setIsShow] = useState(false);
  const [myForm] = ProForm.useForm(); //获取表单
  const [list, setList] = useState([]);
  // const [imageUrl, setImageUrl] = useState('');
  // const [html, setHtml] = useState('');
  const [currentId, setCurrentId] = useState('');
  //选中的id
  const [selRows, setSelRows] = useState([]);

  const actionRef = useRef();
  const columns = [
    {
      title: '序号',
      hideInSearch: true,
      render(c: any, r: any, i: any) {
        return i + 1;
      },
    },
    {
      title: '名字',
      dataIndex: 'name',
    },
    {
      title: '权限',
      // dataIndex: 'permissions',
      render(v: any) {
        return <>{v.permissionOnRoles[0]?.permission?.name}</>;
      },
    },
    {
      title: '简介',
      hideInSearch: true,
      dataIndex: 'desc',
      ellipsis: true,
    },
    {
      title: '操作',
      hideInSearch: true,
      render(v: any) {
        return (
          <Space>
            <Button
              onClick={async () => {
                const info = await loadDoctorAPI(v.id);
                myForm.setFieldsValue(info.data);
                // setImageUrl(info.data.avatar);
                // setHtml(info.data.content);
                setCurrentId(v.id);
                setIsShow(true);
              }}
            >
              <EditOutlined></EditOutlined>
            </Button>
            <Popconfirm
              title="是否确认删除?"
              onConfirm={async () => {
                await delDoctorAPI(v.id);
                actionRef.current?.reload();
              }}
            >
              <Button danger>
                <DeleteOutlined></DeleteOutlined>
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  useEffect(() => {
    if (!isShow) {
      setCurrentId('');
      // setHtml('');
      // setImageUrl('');
    }
  }, [isShow]);
  useEffect(() => {
    loadperAPI().then((res) => {
      setList(
        res.data.list.map((item: any) => {
          return {
            label: item.name,
            value: item.id,
          };
        }),
      );
    });
  }, []);
  return (
    <div>
      <PageContainer>
        <ProTable
          rowKey="id"
          rowSelection={{
            selectedRowKeys: selRows, //设置当前选中的
            onChange(selectedRowKey) {
              // console.log(selectedRowKey);
              setSelRows(selectedRowKey);
            },
          }}
          actionRef={actionRef}
          toolBarRender={() => {
            const tools = [
              <Button
                type="primary"
                key={1}
                onClick={() => {
                  setIsShow(true);
                }}
              >
                <PlusOutlined />
              </Button>,
            ];
            if (selRows.length > 0) {
              tools.push(
                <Button
                  type="primary"
                  danger
                  key={2}
                  onClick={async () => {
                    await delrolesAPI(selRows.join(','));
                    actionRef.current?.reload();
                    setSelRows([]);
                  }}
                >
                  批量删除
                </Button>,
              );
            }
            return tools;
          }}
          request={loadDataAPI}
          columns={columns}
          // dataSource={data}
        ></ProTable>
        <ModalForm
          form={myForm}
          title="编辑"
          width="800px"
          onOpenChange={setIsShow}
          modalProps={{
            maskClosable: false,
            destroyOnClose: true,
          }}
          open={isShow}
          onFinish={async (v) => {
            if (currentId) {
              await editDoctorAPI(currentId, { ...v, permissions: v.permissions.join(',') });
            } else {
              await addDoctorAPI({ ...v, permissions: v.permissions.join(',') });
            }
            setIsShow(false);
            actionRef.current?.reload();
          }}
        >
          <ProFormText
            label="名字"
            name="name"
            placeholder="请输入名字"
            rules={[
              {
                required: true,
                message: '名字不能为空',
              },
            ]}
          ></ProFormText>
          {/* <ProFormText>
            <MyUpload imageUrl={imageUrl} setImageUrl={setImageUrl}></MyUpload>
          </ProFormText> */}
          <ProFormTextArea label="简介" name="desc"></ProFormTextArea>
          <ProFormCheckbox.Group
            label="权限"
            options={list}
            name="permissions"
          ></ProFormCheckbox.Group>
        </ModalForm>
      </PageContainer>
    </div>
  );
}

export default Roles;
